<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="1、设置促销规则"></el-step>
        <el-step title="2、选择参与商家/店铺"></el-step>
        <el-step title="3、添加活动商品"></el-step>
        <el-step title="4、提交审核"></el-step>
      </el-steps>
      <div v-show="active==1">
        <form class="form-horizontal mgt15">
          <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息222</div>
          <div class="form-group">
            <!--活动名称-->
            <label class="col-sm-2 control-label ng-binding">促销活动名称</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-input placeholder="限制在64个字符以内" v-model="filters.promName" ></el-input>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--活动时间-->
            <label class="col-sm-2 control-label ng-binding">活动时间</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="活动开始"
                class="input_postion"
              ></el-date-picker>至
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="活动结束"
                class="input_postion"
              ></el-date-picker>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
          <div class="form-group ng-scope">
            <!--活动类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">活动类型</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="filters.frontPromType">
                <el-radio :label="item.code" class="form-radio" v-for="item in frontPromTypesRadios" :key="item.code">{{item.name}}</el-radio>
                <!-- <el-radio :label="1" class="form-radio">特价促销</el-radio>
                <el-radio :label="2" class="form-radio">折扣促销</el-radio>
                <el-radio :label="3" class="form-radio">直降促销</el-radio> -->
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <label class="col-sm-2 control-label ng-binding">活动描述</label>
            <div class="col-sm-9">
              <label class="col-sm-1 ng-binding">中文</label>
              <div class="col--sm-4">
                <el-input
                  type="text"
                  class="form-control mgB10 ng-pristine ng-valid"
                  maxlength="100"
                  v-model="filters.description"
                  placeholder="最多输入100个字"
                ></el-input>
              </div>
              <div class="col--sm-12">
                <label class="mgB0 ng-binding">注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label>
                <a
                  href
                  style="color:blue;text-decoration:underline;"
                  data-toggle="modal"
                  data-target="#custom-width-modal-img"
                >
                  <!-- <i class="ng-binding">查看示例</i> -->
                </a>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
          <div class="form-group">
            <!--是否支持折上折-->
            <label class="col-sm-2 control-label ng-binding">是否支持折上折</label>
            <div class="col-sm-10 pdt3px themeTextColor">
              <el-radio-group v-model="filters.foldingFlag">
                <el-radio :label="1" class="form-radio">是</el-radio>
                <el-radio :label="0" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
            <label class="col-sm-2 control-label ng-binding">（与会员价叠加）</label>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group" v-show="false">
            <!--是否排斥优惠券-->
            <label class="col-sm-2 control-label ng-binding">是否排斥优惠券</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio3">
                <el-radio :label="3" class="form-radio">是</el-radio>
                <el-radio :label="6" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" v-show="false">
            <!--是否包邮-->
            <label class="col-sm-2 control-label ng-binding">是否包邮</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio4">
                <el-radio :label="6" class="form-radio">是</el-radio>
                <el-radio :label="3" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <label class="col-sm-2 control-label ng-binding">超限规则</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="filters.overLimitRule">
                <el-radio :label="1" class="form-radio">按原价购买</el-radio>
                <el-radio :label="2" class="form-radio">不可购买</el-radio>
              </el-radio-group>
              <br />
              <label
                class="control-label ng-binding"
              >注：超限规则指用户购买商品数量超过活动可购买数量（通过活动设置的"个人限购数、活动总限购数、每单限购数"计算出）后的购买规则。</label>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div v-show="false" class>
            <div class="col-sm-2 control-label">
              <label class="ng-binding">供应商分摊比例：</label>
            </div>
            <div class="mgT10">
              <div class="row mgB10">
                <div class="col-sm-2 m-b-xs">
                  <el-button type="primary" size="mini" @click="querySupplierListForAdd()">选择供应商</el-button>
                  <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
                </div>
                <span class="col-sm-3 m-b-xs">不选择时默认不分摊，全部有商家或平台承担</span>
              </div>
              <div class="portlet-body flip-scroll" hidden>
                <table
                  class="table-striped table-condensed flip-content ng-hide"
                  ng-show="selectedSupplierList.length>0"
                >
                  <thead>
                    <tr>
                      <th style="width:100px;" class="ng-binding">
                        <label class="i-checks m-b-none">
                          <input
                            type="checkbox"
                            name="selected"
                            ng-click="selectedChkAll()"
                            ng-checked="isSelectedChkAll()"
                          />
                          <i></i>
                        </label>
                        全选
                      </th>
                      <th class="minw80 textCenter">供应商ID</th>
                      <th class="minw80 textCenter">供应商名称</th>
                      <th class="minw80 textCenter">
                        <i class="asterisk">*</i>分摊比例
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- ngRepeat: e in selectedSupplierList -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">参与条件</div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
            <!--活动渠道-->
            <div
              class="line line-dashed b-b line-lg"
              ng-show="promotionDetailContent.channelCodes.length > 0"
            ></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
              <label class="col-sm-2 control-label ng-binding">活动渠道</label>
              <div class="col-sm-10 pdt3px">
               <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="filters.channelCodes" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="item in chanelCodesRadios" :label="item.code" :key="item.code">{{item.name}}</el-checkbox>
              </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
            <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
              <label class="col-sm-2 control-label ng-binding">活动平台</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate1"
                  v-model="checkAll1"
                  @change="handleCheckAllChange1"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="filters.proPlatform" @change="handleCheckedCitiesChange1">
                  <el-checkbox v-for="city in proPlatformRadios" :label="city.code" :key="city.code">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">新老用户</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate2"
                  v-model="checkAll2"
                  @change="handleCheckAllChange2"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="filters.proUserType" @change="handleCheckedCitiesChange2">
                  <el-checkbox v-for="city in proUserTypeRadios" :label="city.code" :key="city.code">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">会员类型</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate3"
                  v-model="checkAll3"
                  @change="handleCheckAllChange3"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="filters.proMemberType" @change="handleCheckedCitiesChange3">
                  <el-checkbox v-for="city in proMemberTypeRadios" :label="city.code" :key="city.code">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 会员等级(修改) -->
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
                <div class="col-sm-10 pdt3px">
                  <el-checkbox
                    :indeterminate="isIndeterminate4"
                    v-model="checkAll4"
                    @change="handleCheckAllChange4"
                  >全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="filters.proMemberLevel" @change="handleCheckedCitiesChange4">
                    <el-checkbox v-for="city in proMemberLevelRadios" :label="city.code" :key="city.code">{{city.name}}</el-checkbox>
                  </el-checkbox-group>
                </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
              <!--备注-->
              <label class="col-sm-2 control-label ng-binding">备注</label>
              <div class="col-sm-10 pdt3px themeTextColor">
                <quill-editor
                  v-model="filters.remark"
                  ref="myQuillEditor"
                  style="height: 300px;"
                  :options="editorOption"
                ></quill-editor>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-container" v-show="active==2">
        <el-tabs type="border-card" style="margin-top: 15px;">
          <el-tab-pane label="商家">
            <div style="float: left;margin-bottom: 10px;"  v-if="this.auth =='0'">
                <el-button type="primary" size="mini" @click="querySupplierListForAdd()">添加商家</el-button>
                <el-button type="danger" size="mini" @click="delAllSelectedSuppliermerchantTableData2()">批量删除</el-button>
            </div>
            <el-table :data="merchantTableData2" border style="width: 100%"  @selection-change="merchantTableData2selectionChange"
                      >
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="id" label="商品编号">
                <template slot-scope="scope">
                  <span>{{ scope.row.orgNumber}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商家名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="组织分类">
                <template slot-scope="scope">
                  <!--<span>{{ scope.row.merchantType}}</span>-->
                  <span v-if="scope.row.merchantType =='1'">自营商家</span>
                  <span v-if="scope.row.merchantType =='2'">第三方商户</span>
                </template>
              </el-table-column>
              <el-table-column label="操作"   v-if="this.auth =='0'">
                <template slot-scope="scope">
                  <el-button  type="text" class="textButton" @click="merchantTableData2delete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar" style="padding:10px;">
              <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="mainMerchantRefreshPageRequest"
                :current-page="mainMerchantForm.pageNo"
                :page-size="mainMerchantForm.pageSize"
                :total="mainMerchantTableDataTatol"
                style="float:right;"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="mainMerchantHandleSizeChange"
              ></el-pagination>
              </div>
          </el-tab-pane>


          <el-tab-pane label="店铺">
            <div style="float: left;margin-bottom: 10px;"  v-if="this.auth =='0'">
                <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
                <el-button type="danger" size="mini" @click="delAllSelectedSupplierstoreTableData()">批量删除</el-button>
            </div>
            <el-table :data="storeTableData" border style="width: 100%"  @selection-change="storeTableDataselectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column label="店铺编号">
                <template slot-scope="scope">
                  <span>{{ scope.row.storecode}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="店铺名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.storename}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="店铺类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.storeType =='1'">线上店铺</span>
                </template>
              </el-table-column>
              <el-table-column  label="操作"   v-if="this.auth =='0'">
                <template slot-scope="scope">
                  <el-button  type="text" class="textButton"  @click="storeDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar" style="padding:10px;">
              <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="mainSroreMerchantRefreshPageRequest"
                :current-page="mainStoreMerchantForm.pageNo"
                :page-size="mainStoreMerchantForm.pageSize"
                :total="storeTableDataTatol"
                style="float:right;"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="mainSroreMerchantHandleSizeChange"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active==3">
        <el-tabs type="border-card">
          <div style=" height: 40px;">
            <el-button size="mini" style="float: left;" type="primary" @click="productSelectionModal()">添加追加商品</el-button>
            <!--<el-button size="mini" style="float: left;" type="danger" v-show="modalShow==1" @click="delBatchMerchantProducts(batchDeleteSelection)">批量删除</el-button>-->
            <!--<el-button size="mini" style="float: left;" type="primary" v-show="modalShow==2" @click="batchReAdd()">批量重新添加</el-button>-->
            <el-button-group style="float:right;">
              <!-- <el-button size="mini" @click="importCommodityModal(1)">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
              <el-button size="mini" @click="importCommodityModal(2)">商品导入<i class="el-icon-upload el-icon--right"></i></el-button> -->
            </el-button-group>
          </div>
          <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="生效商品" name="0">
              <div>
                  <div style="margin-bottom: 10px;float: right;">
                      <el-button-group>
                          <!-- <el-button size="mini" style="float: left;" type="info"  icon="el-icon-edit" @click="showBatchSetUp()">批量设置</el-button>
                          <el-button size="mini" style="float: left;" type="info"  icon="el-icon-search"  @click="showQueryCondition()">搜索</el-button> -->
                      </el-button-group>
                  </div>
                  <div >
                    <div style="padding-top: 40px;padding-bottom: 20px;" v-show="setUp">
                      <el-form :model="dataForm" :inline="true">
                          <el-form-item label="商品名称">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商品编号">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商品品牌">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商品条码">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商家">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                      </el-form>
                      <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                        <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">保存</el-button>
                      </div>
                    </div>
                    <div style="padding-top: 40px;padding-bottom: 20px;" v-show="search">
                      <el-form :model="dataForm" :inline="true">
                          <el-form-item label="商品条码">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商品编号">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商家">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="商品名称">
                              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                          </el-form-item>
                      </el-form>
                      <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                        <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">查询</el-button>
                        <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">重置</el-button>
                      </div>
                    </div>
                  </div>
              </div>
              <div>
                <el-table :data="merchantProductTableData" border style="width: 100%" @selection-change="handleBatchDeleteSelection">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="mpCode" label="商品编号" width="180">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpCode}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="barcode" label="商品条码">
                    <template slot-scope="scope">
                      <span>{{ scope.row.barcode}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit" label="计量单位">

                  </el-table-column>
                  <el-table-column prop="merchantName" label="商家名称">
                    <template slot-scope="scope">
                      <span>{{ scope.row.merchantName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="统一零售价（元）">
                    <template slot-scope="scope">
                      <span>{{ scope.row.merchantName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="contentType" label="直降（元）">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.contentType"  @blur="updatePriceOrLimit(scope.row)"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column prop="channelMerchantLimit" label="商家单渠道限购">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.channelMerchantLimit"    @blur="updatePriceOrLimit(scope.row)"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column prop="channelStoreLimit" label="店铺单渠道限购">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.channelStoreLimit"    @blur="updatePriceOrLimit(scope.row)"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column prop="channelIndividualLimit" label="个人单渠道限购">
                     <template slot-scope="scope">
                        <el-input v-model="scope.row.channelIndividualLimit" @blur="updatePriceOrLimit(scope.row)"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column prop="orderLimit" label="订单限购">
                     <template slot-scope="scope">
                        <el-input v-model="scope.row.orderLimit"  @blur="updatePriceOrLimit(scope.row)"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column  label="操作" >
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="delMerchantProducts(scope.row.promotionId,scope.row.mpId)"
                        type="text"
                        size="small">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 10px;">
                <el-button size="mini" type="primary" @click="mainProductTableDataFormFind()">查询促销商品</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="互斥商品" name="1">
              <el-table :data="merchantProductTableDataMutex" border style="width: 100%" @selection-change="repelSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="mpCode" label="商品编号" width="180"></el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="barcode" label="商品条码"></el-table-column>
                <el-table-column prop="unit" label="计量单位"></el-table-column>
                <el-table-column prop="merchantName" label="商家名称"></el-table-column>
                <el-table-column prop="mutexTime" label="互斥记录时间"></el-table-column>
                <el-table-column prop="markdown" label="操作"></el-table-column>
              </el-table>
              <!--<div style="margin-top: 10px;">-->
                <!--<el-button size="mini" type="primary" @click="promotionPriceCheckAndSubmit()">确认添加</el-button>-->
              <!--</div>-->
            </el-tab-pane>
          </el-tabs>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active==4">
        <div  style="font-size:25px;text-align: center;margin-top: 27px;">
            <el-alert title="等待审核,审核通过后立即生效" type="success" center ></el-alert>
        </div>
      </div>
    </div>
    <div>
      <el-button style="margin-top: 60px;margin-bottom: 60px;" @click="next">下一步</el-button>
    </div>
    <!-- 选择参与商家 -->
    <el-dialog :title="'添加商家'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false" >
      <div>
        <div>
          <el-form :inline="true" :model="merchantForm" size="mini">
            <el-form-item label="商家编号" label-width="100px">
              <el-input v-model="merchantForm.orgNumber" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="商家名称" label-width="100px">
              <el-input v-model="merchantForm.name" placeholder="" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-button  size="mini" @click="merchantFormFind()">查询</el-button>
          <el-button  size="mini">重置</el-button>
        </div>
        <div style="padding-top: 45px;">
          <el-table :data="merchantTableData" border style="width: 100%" @selection-change="addSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column width="285px" align="center" label="商家编号">
              <template slot-scope="scope">
                <span>{{ scope.row.orgNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column width="389px" align="center" label="商家名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="refreshPageRequest"
              :current-page="merchantForm.start"
              :page-size="merchantForm.limit"
              :total="merchantTableDataTatol"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="handleSizeChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size"  type="primary"  @click.native="editDialogVisible = false" @click="merchantTableDataSubmit">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择参与店铺 -->
    <el-dialog :title="'添加参与店铺'" width="60%" :visible.sync="editDialogVisible2" :close-on-click-modal="false" >
      <div>
        <div>
          <el-form :inline="true" :model="storeForm" size="mini">
            <el-form-item label="店铺名称" label-width="100px">
              <el-input v-model="storeForm.storename" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="店铺编号" label-width="100px">
              <el-input v-model="storeForm.storecode" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家编号" label-width="100px">
              <el-input v-model="storeForm.orgNumber" placeholder="" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家名称" label-width="100px">
              <el-input v-model="storeForm.name" placeholder="" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-button  size="mini" @click="storeFormFind()">查询</el-button>
          <el-button  size="mini" @click="querySupplierListForAdd2()">重置</el-button>
        </div>
        <div style="padding-top: 45px;">
          <el-table :data="storeTableData2" border style="width: 100%" @selection-change="storeTableData2AddSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="店铺编号">
              <template slot-scope="scope">
                <span>{{ scope.row.storecode}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="店铺名称">
              <template slot-scope="scope">
                <span>{{ scope.row.storename}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="所属商家">
              <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="refreshPageRequestStore"
              :current-page="merchantFormStore.start"
              :page-size="merchantFormStore.limit"
              :total="merchantTableDataTatolStore"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="handleSizeChangeStore"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false">取消</el-button>
        <el-button :size="size"  type="primary"  @click.native="editDialogVisible2 = false" @click="storeTableData2Click">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导入、上传弹窗-->
    <el-dialog :title="operation?'商品导入':'下载模板'" :inline="true" width="20%" :visible.sync="uploadVisible" :close-on-click-modal="false">
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation">商品导入模板</el-button>
        <el-button type="primary" icon="el-icon-upload" v-show="operation==false">商品导入</el-button>
      </div>
    </el-dialog>
        <!--新增编辑界面:添加商品-->
    <el-dialog :title="'添加商品'" :inline="true" width="65%" :visible.sync="productVisible" :close-on-click-modal="false">
      <div>
        <el-form :model="productForm" label-width="90px" ref="dataForm" :size="size">
          <div class="col-sm-9">
            <el-form-item label="商品名称">
              <el-input v-model="productForm.productName" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品编号">
              <el-input v-model="productForm.productNo" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品条码">
              <el-input v-model="productForm.barCode" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品类别">
              <TreeSelect :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion" @getValue="getValue($event)" @check-change="handleCheckChange"/>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品品牌">
                <el-select v-model="value6" multiple placeholder="请选择" collapse-tags>
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商家名称">
                <el-select v-model="value5" multiple placeholder="请选择" collapse-tags>
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </div>
          <el-button  size="mini" @click="productFormFind()">查询</el-button>
          <el-button  size="mini" >重置</el-button>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table :data="productTableData" border style="width: 100%" @selection-change="addSelectionChangeProduct">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="商品编号" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="商品条码">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="计量单位">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="商品品牌">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="商品类别">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="markdown" label="所属商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName}}</span>
            </template>
          </el-table-column>
        </el-table>

        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForProduct"
            :current-page="productForm.start"
            :page-size="productForm.limit"
            :total="productTableDataTotal"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForProduct"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="productVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="productVisible = false"
                   @click="productTableData2Click" :loading="productEditLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import { quillEditor } from "vue-quill-editor";
import TreeSelect from "@/views/Core/TreeSelect";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { singleFrontPromTypesRadio, chanelCodesRadio,proPlatformRadio,proUserTypeRadio,proMemberTypeRadio,proMemberLevelRadio } from "@/market/dict/marketDict";
const channelArr = ["bbc"];
const channelArr1 = ["APP端", "PC端", "微信"];
const channelArr2 = ["新用户", "老用户"];
const channelArr3 = ["普通会员"];
const channelArr4 = ["注册用户", "VIP会员", "金卡"];
export default {
  name: "Tab",
  components: {
    KtButton,
    TableColumnFilterDialog,
    quillEditor,
    TreeSelect
  },
  created: function(){
    let _this = this;
    let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          _this.filters.id = res.data.id;
          _this.filters.promType = res.data.promType;
          _this.filters.promName = res.data.promName;
          _this.filters.frontPromType = res.data.frontPromType;
          _this.filters.foldingFlag = res.data.foldingFlag;
          _this.filters.overLimitRule = res.data.overLimitRule;
          _this.filters.description = res.data.description;
          _this.filters.channelCodes = (res.data.channelCodes + "").split("|");
          _this.filters.proPlatform = (res.data.proPlatform + "").split("|");
          _this.filters.proUserType = (res.data.proUserType + "").split("|");
          _this.filters.proMemberType = (res.data.proMemberType + "").split("|");
          _this.filters.proMemberLevel = (res.data.proMemberLevel + "").split("|");
          _this.filters.startTime = res.data.startTime;
          _this.filters.endTime = res.data.endTime;
          _this.filters.remark = res.data.remark;
        }else{
          alert("获取促销详情失败");
        }
      };
    if(typeof(this.$route.query.value)!="undefined"){

      this.promotionId = this.$route.query.value;
      this.promotion.id = this.$route.query.value;
      //获取促销基本信息详情
      let params = {"id": this.promotionId};
      this.utils.request.promotionDetailById(params, callback);
    }
  },
  data() {
    return {
      size:'small',
      editDialogVisible:false,
      editDialogVisible2:false,
      url:'./static/shop.png',
      url2:'./static/shop2.png',
      content: null,
      editorOption: {},
      size: "small",
      productVisible: false,
      uploadVisible: false,
      operation: false, // true:商品导入, false:下载模板
      activeName: 0,
      setUp:false,
      search:false,
      filters: {
        "id": null,
        "promType":1,//单一促销
        "promName": null,
        "frontPromType": 2,
        "foldingFlag": 1,
        "overLimitRule": 2,
        "channelCodes": [110001],
        "proPlatform": [1],
        "proUserType": [1],
        "proMemberType": [1],
        "proMemberLevel": [2],
        "createMerchantId":11,
        "createMerchantName":"wys",
        "contentType":1,
        "creator":1,
        "creatorName":"wys",
        "updator":1,
        "updatorName":"wys"
      },
      editLoading: false,
      dataForm: {},
      modalShow: 1,
      multipleSelection: [],
      batchDeleteSelection: [],
      repelSelection: [],
      addSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      tableData: [
        { id: 1912250010887324,productName: "新供应商001",unit: "件",shopName: "张小二服饰",price: 1.2,markdown: 1,shopLimit1: 100,shopLimit2: 100,shopLimit3: 100},
        { id: 1912250010887323,productName: "新供应商002",unit: "件",shopName: "张小二服饰",price: 1.3,markdown: 1,shopLimit1: 100,shopLimit2: 100,shopLimit3: 100}
        ],

      active: 3,
      radio1: 3,
      radio2: 3,
      radio3: 3,
      radio4: 3,
      radio5: 3,
      shopList: [],
      businessList: [],
      checkAll: false,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      checkAll4: false,
      checkedCities: [110001],
      checkedCities1: ["APP端", "PC端", "微信"],
      checkedCities2: ["新用户", "老用户"],
      checkedCities3: ["普通会员"],
      checkedCities4: ["注册用户", "VIP会员", "金卡"],
      frontPromTypesRadios: singleFrontPromTypesRadio,
      chanelCodesRadios: chanelCodesRadio,
      proPlatformRadios: proPlatformRadio,
      proUserTypeRadios: proUserTypeRadio,
      proMemberTypeRadios: proMemberTypeRadio,
      proMemberLevelRadios: proMemberLevelRadio,
      cities: channelArr,
      cities1: channelArr1,
      cities2: channelArr2,
      cities3: channelArr3,
      cities4: channelArr4,
      isIndeterminate: true,
      isIndeterminate1: true,
      isIndeterminate2: true,
      isIndeterminate3: true,
      isIndeterminate4: true,
      options: [{
        value: '1',
        label: '京东直营'
      }, {
        value: '2',
        label: '淘宝旗舰'
      }, {
        value: '3',
        label: '良品铺子1店'
      }],
      value5: [],
      options2: [{
        value: '1',
        label: '良品铺子'
      }],
      value6: [],
      isClearable:true,      // 可清空（可选）
      isAccordion:true,      // 可收起（可选）
      valueId:20,            // 初始ID（可选）
      props:{                // 配置项（必选）
        value: 'id',
        label: 'name',
        children: 'children',
        // disabled:true
      },
      // 选项列表（必选）
      list:[
        {id:2,parentId:0,name:"居家生活",rank:1},
        {id:4,parentId:0,name:"数码家电",rank:1},
        {id:5,parentId:0,name:"母婴保健",rank:1},
        {id:6,parentId:0,name:"美食酒水",rank:2},
        {id:7,parentId:0,name:"个护清洁",rank:2},
        {id:9,parentId:0,name:"好物甄选",rank:2},

        {id:101,parentId:2,name:"个护健康",rank:3},
        {id:102,parentId:2,name:"3C数码",rank:4},
        {id:103,parentId:2,name:"汽车用品",rank:5},
        {id:202,parentId:101,name:"按摩电器",rank:5},
        {id:203,parentId:101,name:"个护美容",rank:5}
      ],

      //第一步添加成功赋值
      //外部赋值-----------------start
      promotionId:2,
      auth:0,
      //外部赋值-----------------start

      promotion:{
        //促销id
        id:"",
        promotionId:"1",
        merchantType:"1",
      },
      pomotionListObject:{pomotionList:[]},
      // pomotionList:[
      //   {
      //   // id:"0",
      //   promotionId:"0",
      //   merchantId:"0",
      //   merchantType:0,
      //   merchantName:"",
      //   storeId:"0",
      //   // createTime:"2020-01-15 11:38:41",
      //   // creator:"0",
      //   // creatorName:"",
      //   // updateTime:"2020-01-15 11:38:41",
      //   // updator:"0",
      //   // updatorName:""
      // }
      // ],
      mainMerchantForm:{
        promotionId: this.promotionId,
        merchantType:"1",
        pageNo:1,
        pageSize:10,
        orderBys:{
          "f":"create_time",
          "s":"desc"
        }
      },
      mainMerchantTableDataTatol: 0,
      //---------------------------商家------------------------------------------------start
      merchantForm: {
        start:1,
        limit:10,
        // name:"",
        // orgNumber:""
      },
      merchantFormStore: {
        start:1,
        limit:10,
      },
      merchantTableDataTatol: 0,
      merchantTableDataTatolStore: 0,
      merchantTableData: [
      ],
      //选择的商家列表
      merchantTableData2: [
      ],
      //---------------------------商家------------------------------------------------end
      storeForm:{
        start:1,
        limit:10,
        merchantIds:"",
        storename:"",
        storecode:"",
        orgNumber:"",
        name:"",
      },

      mainStoreMerchantForm:{
        promotionId: this.promotionId,
        merchantType:"2",
        pageNo:1,
        pageSize:10,
        orderBys:{
          "f":"create_time",
          "s":"desc"
        }
      },
      storeTableDataTatol: 0,
      storeTableData:[
      ],
      //选择店铺
      storeTableData2Tatol: 0,
      storeTableData2: [],
      //选择店铺
      addSelectionStoreTableData2: [],
      merchantTableData2Selection:[],
      merchantTableData2SelectionIndex:0,
      storeTableDataSelection:[],
      storeTableDataSelectionIndex:0,


      // -----------------------------------商品开始属性-----------------------------------start

      productForm:{
        start:1,
        limit:10,
        productName:"",
        productNo:"",
        barCode:"",
      },
      productTableDataTotal: 0,
      productTableData: [],
      productAddSelection: [],
      productEditLoading: false,
      productPromotion:{
        //促销id
        promotionId:"1",
      },
      productPromotionListObject:{productPromotionList:[]},

      mainProductForm:{
        promotionId: this.promotionId,
        start:1,
        limit:10,
        orderBys:{
          "f":"create_time",
          "s":"desc"
        }
      },

      merchantProductTableData: [
        // { id: 1912250010887324,promotionId: 2001100000003832,mpCode: 2001100000003832,productName: "新供应商001",unit: "件", merchantName: "张小二服饰",price: 1.2,contentType: 1,channelMerchantLimit: 100,channelStoreLimit: 100,channelIndividualLimit: 100,orderLimit: 100},
        // { id: 1912250010887323,promotionId: 2001100000003832,mpCode: 200110000000384,productName: "新供应商002",unit: "件",merchantName: "张小二服饰",price: 1.2,contentType: 1,channelMerchantLimit: 10,channelStoreLimit: 10,channelIndividualLimit: 10,orderLimit: 1},
      ],
      merchantProductTableDataTotal: 0,

      merchantProductTableDataMutex: [
        { id: 1912250010887324,promotionId: 2001100000003832,mpCode: 2001100000003832,productName: "新供应商001",unit: "件",merchantName: "张小二服饰",price: 1.2,contentType: 1,channelMerchantLimit: 100,channelStoreLimit: 100,channelIndividualLimit: 100,orderLimit: 100},
        { id: 1912250010887323,promotionId: 2001100000003832,mpCode: 200110000000384,productName: "新供应商002",unit: "件",merchantName: "张小二服饰",price: 1.2,contentType: 1,channelMerchantLimit: 10,channelStoreLimit: 10,channelIndividualLimit: 10,orderLimit: 1},
      ],

      merchantProductTableDataMutexTotal: 0,

      // -----------------------------------商品结束属性-----------------------------------end
    };
  },
  methods: {
    //---------------------------店铺------------------------------------------------start
    //查询店铺
    storeFormFind(){
      //商家 取出商家id-->merchantId
      // this.merchantTableData2;


      let ids = this.merchantTableData2.map(item => item.merchantId).toString();

      console.log("----ids");
      console.log(this.merchantTableData2);
      console.log(ids);
      console.log("----ids---2");

      let params = [];
      console.log("----idArray---");
      let idArray = (ids + "").split(",");
      console.log(idArray);
      console.log("----idArray---2");

      for (var i = 0; i < idArray.length; i++) {
        params.push({id: idArray[i]});
      }

      console.log("----params");
      console.log(params);
      console.log("----params--2");



      console.log(this.merchantTableData.length);
      console.log("----");
      console.log(this.merchantTableData);

      // mergeTo = mergeTo.concat(mergeFrom);

      if(this.merchantTableData2.length==0) {
        this.$message({message: "请先选择商家", type: "success"});
      }

      // this.merchantTableDataTatol;
      this.storeTableData2.splice(0, this.storeTableData2.length);
      var  this__= this;
      this.storeForm.merchantIds = ids;
      this.utils.request.queryByIds(this.storeForm, function (res) {
        console.log(res)
        if (res.code == "0000") {
          // this__.storeTableData2= this__.storeTableData2.concat(res.data);

          this__.storeTableData2= res.data;
          this__.merchantTableDataTatolStore = res.totle;
        }
      });


    },
    storeTableDataselectionChange(val){
      this.storeTableDataSelection=val;
    },
    merchantTableData2selectionChange(val){
      this.merchantTableData2Selection=val;
    },
    //选择店铺
    storeTableData2AddSelectionChange(val){
      this.addSelectionStoreTableData2=val;
    },
    //确定 选择店铺
    storeTableData2Click(){
      console.log(this.addSelectionStoreTableData2);
      // 调添加店铺 关系接口
      this.merchantTableDataSubmit2();
    },
    merchantTableDataSubmit2(){
      // this.merchantTableData2 = this.addSelection;

      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          this.storeSaveBatch();
        }
      };

      //调接口
      //删除这个活动老的数据
      //批量添加新的数据
      this.promotion.id=null;
      this.promotion.promotionId=this.promotionId;
      this.promotion.merchantType="2";
      this.utils.request.promotionMerchantDeleteByPromotionId(this.promotion, callback);
    },

    //批量添加店铺
    storeSaveBatch(){
      console.log("storeSaveBatch");
      console.log(this.addSelectionStoreTableData2);
      console.log("storeSaveBatch2");
      this.pomotionListObject.pomotionList.splice(0,this.pomotionListObject.pomotionList.length);
      console.log("storeSaveBatch pomotionList");
      console.log(this.pomotionListObject.pomotionList);
      console.log("storeSaveBatch pomotionList2");

      for (var i = 0; i < this.addSelectionStoreTableData2.length; i++) {
        var temp = {};

        temp.promotionId         = this.promotionId;
        temp.storeId           =  this.addSelectionStoreTableData2[i].id;
        temp.merchantType        = "2";
        temp.storename        = this.addSelectionStoreTableData2[i].storename;
        temp.storecode =this.addSelectionStoreTableData2[i].storecode;
        temp.storeType           =this.addSelectionStoreTableData2[i].storeType;

        this.pomotionListObject.pomotionList.push(temp);
      }
      console.log("storeSaveBatch promotionMerchantSaveBatch push ok");
      console.log(this.pomotionListObject.pomotionList);
      console.log("storeSaveBatch promotionMerchantSaveBatch push ok2");

      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          this.mainStoreTableDataFormFind();
        }
      };

      this.utils.request.promotionMerchantSaveBatch(this.pomotionListObject, callback );

    },
    //查询绑定关系的店铺
    mainStoreTableDataFormFind(){
      // this.storeTableData
      this.mainMerchantForm.merchantType="2";
      this.mainMerchantForm.promotionId=this.promotionId;
      var  this__= this;
      this.utils.request.promotionMerchantList(this.mainMerchantForm, function (res) {
        console.log(res);
        if (res.code == "0000") {
          var ret = [];
          for (var i = 0; i < res.data.list.length; i++) {
            var temp = {};
            temp.promotionId         = res.data.list[i].promotionId;
            temp.id        = res.data.list[i].id;
            temp.storeId   =  res.data.list[i].storeId;
            temp.storename = res.data.list[i].storename;
            temp.storecode =  res.data.list[i].storecode;
            temp.storeType = res.data.list[i].storeType;

            ret.push(temp);
          }
          //店铺调试
          this__.storeTableData = res.data.list;
          this__.storeTableDataTatol = res.data.totalCount;
        }
      });
    },


    // 换页刷新
    mainSroreMerchantRefreshPageRequest: function (pageNum) {
      this.mainStoreMerchantForm.pageNo = pageNum;
      this.mainStoreTableDataFormFind();
    },
    // 换页刷新
    mainSroreMerchantHandleSizeChange: function (pageSize) {
      this.mainStoreMerchantForm.pageNo = 1;
      this.mainStoreMerchantForm.pageSize = pageSize;
      this.mainStoreTableDataFormFind();
    },


    // 换页刷新
    refreshPageRequestStore: function (pageNum) {
      this.merchantFormStore.start = pageNum;
      // this.merchantFormFind();
      this.storeFormFind();
    },
    // 换页刷新
    handleSizeChangeStore: function (pageSize) {
      this.merchantForm;
      this.merchantFormStore.limit = pageSize;
      this.merchantFormStore.start = 1;
      this.storeFormFind();
    },

    //---------------------------店铺------------------------------------------------end


    //---------------------------商家------------------------------------------------start

    //---------------------------分页------------------------------------------------start
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.merchantForm.start = pageNum;
      this.merchantFormFind();
    },
    // 换页刷新
    handleSizeChange: function (pageSize) {
      this.merchantForm.limit = pageSize;
      this.merchantForm.start = 1;
      this.merchantFormFind();
    },

    // 换页刷新
    mainMerchantRefreshPageRequest: function (pageNum) {
      this.mainMerchantForm.pageNo = pageNum;
      this.mainMerchantFormFind();
    },
    // 换页刷新
    mainMerchantHandleSizeChange: function (pageSize) {
      this.mainMerchantForm.pageNo = 1;
      this.mainMerchantForm.pageSize = pageSize;
      this.mainMerchantFormFind();
    },
    //查询绑定关系的商家
    mainMerchantFormFind(){
      this.mainMerchantForm.merchantType="1";
      var  this__= this;
      this.mainMerchantForm.promotionId=this.promotionId;
      this.utils.request.promotionMerchantList(this.mainMerchantForm, function (res) {

        console.log(res);
        if (res.code == "0000") {
          var ret = [];
          for (var i = 0; i < res.data.list.length; i++) {
            var temp = {};
            temp.id = res.data.list[i].id;
            temp.name = res.data.list[i].merchantName;
            temp.orgNumber =  res.data.list[i].orgNumber;
            temp.merchantType = res.data.list[i].merchantTypeManager;
            temp.merchantId=res.data.list[i].merchantId;

            ret.push(temp);
          }

          this__.merchantTableData2 = ret;
          this__.mainMerchantTableDataTatol = res.data.totalCount;
        }
      });
    },
    // 删除店铺
    storeDelete(id){
      console.log(id);
      console.log("删除店铺");

      let callback = res => {
        console.log(res);
        this.mainStoreTableDataFormFind();

        if (res.code == "0000" && res.data=="1") {
          //删除成功再调分页
          this.$message({message: "删除成功", type: "success"});

        }else{
          this.$message({message: "操作失败, " + res.msg, type: "error"});
        }
      };

      this.promotion.id = id;
      this.utils.request.promotionMerchantDeleteById(this.promotion,callback);
    },

    //---------------------------分页------------------------------------------------end
    //删除商家
    merchantTableData2delete(id){
      console.log(id);
      console.log("删除商家");

      let callback = res => {
        console.log(res);
        this.mainMerchantFormFind();
        if (res.code == "0000" && res.data=="1") {
        //删除成功再调分页
        this.$message({message: "删除成功", type: "success"});

        }else{
          this.$message({message: "操作失败, " + res.msg, type: "error"});
        }
      };

      this.promotion.id = id;
      this.utils.request.promotionMerchantDeleteById(this.promotion,callback);
    },
    //选择商家
    addSelectionChange(val) {
      this.addSelection = val;
      console.log(this.addSelection);
    },
    //提交 选择商家
    merchantTableDataSubmit(){
      // this.merchantTableData2 = this.addSelection;

      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          this.promotionMerchantSaveBatch();
        }
      };

      //调接口
      //删除这个活动老的数据
      //批量添加新的数据
      this.promotion.id=null;
      this.promotion.promotionId=this.promotionId;
      this.promotion.merchantType="1";
      this.utils.request.promotionMerchantDeleteByPromotionId(this.promotion, callback);
    },
    promotionMerchantSaveBatch(){
      console.log("promotionMerchantSaveBatch");
      console.log(this.addSelection);
      console.log("promotionMerchantSaveBatch2");
      this.pomotionListObject.pomotionList.splice(0,this.pomotionListObject.pomotionList.length);
      console.log("pomotionList");
      console.log(this.pomotionListObject.pomotionList);
      console.log("pomotionList2");

      for (var i = 0; i < this.addSelection.length; i++) {
        var temp = {};

        temp.promotionId = this.promotionId;
        temp.merchantId =  this.addSelection[i].id;
        temp.merchantType = "1";
        temp.merchantName = this.addSelection[i].name;
        temp.merchantTypeManager=this.addSelection[i].merchantType;
        temp.orgNumber=this.addSelection[i].orgNumber;
        temp.name = this.addSelection[i].name;

        this.pomotionListObject.pomotionList.push(temp);
      }
      console.log("promotionMerchantSaveBatch push ok");
      console.log(this.pomotionListObject.pomotionList);
      console.log("promotionMerchantSaveBatch push ok2");

      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          this.mainMerchantForm.merchantType="1";
          this.mainMerchantFormFind();
        }
      };

      var  this__= this;
      this.utils.request.promotionMerchantSaveBatch(this.pomotionListObject, callback );

      console.log("----ok");
      console.log(this.merchantTableData2);
      console.log("----ok2");

    },
    //查询商家
    merchantFormFind(){
      var  this__= this;
      this.utils.request.queryMerchantList(this.merchantForm, function (res) {
        // this.utils.request.queryMerchantListOther(null, function (res) {
        if (res.code == "0000") {
          this__.merchantTableData= res.data;
          this__.merchantTableDataTatol = res.totle;
        }
      });
    },
    //---------------------------商家------------------------------------------------end

    //活动渠道
    handleCheckAllChange(val) {
      this.filters.channelCodes = val ? chanelCodesRadio.map(function(value,index,array){return value.code}) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.chanelCodesRadios.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.chanelCodesRadios.length;
    },
    //活动平台
    handleCheckAllChange1(val) {
      this.filters.proPlatform = val ? proPlatformRadio.map(function(value,index,array){return value.code}) : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.proPlatformRadios.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.proPlatformRadios.length;
    },

    //新老用户
    handleCheckAllChange2(val) {
      this.filters.proUserType = val ? proUserTypeRadio.map(function(value,index,array){return value.code}) : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.proUserTypeRadios.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.proUserTypeRadios.length;
    },
    //会员类型
    handleCheckAllChange3(val) {
      this.filters.proMemberType = val ? proMemberTypeRadio.map(function(value,index,array){return value.code}) : [];
      this.isIndeterminate3 = false;
    },
    handleCheckedCitiesChange3(value) {
      let checkedCount = value.length;
      this.checkAll3 = checkedCount === this.proMemberTypeRadios.length;
      this.isIndeterminate3 =
        checkedCount > 0 && checkedCount < this.proMemberTypeRadios.length;
    },
    //会员等级
    handleCheckAllChange4(val) {
      this.filters.proMemberLevel = val ? proMemberLevelRadio.map(function(value,index,array){return value.code}) : [];
      this.isIndeterminate4 = false;
    },
    handleCheckedCitiesChange4(value) {
      let checkedCount = value.length;
      this.checkAll4 = checkedCount === this.proMemberLevelRadios.length;
      this.isIndeterminate4 =
        checkedCount > 0 && checkedCount < this.proMemberLevelRadios.length;
    },
    //添加商家
    querySupplierListForAdd() {
        this.editDialogVisible = true;
        this.promotion.merchantType=1;
    },
    //添加店铺
    querySupplierListForAdd2() {
      this.editDialogVisible2 = true;
      this.promotion.merchantType=2;
    },
    delAllSelectedSupplierstoreTableData(){
      let ids = this.storeTableDataSelection.map(item => item.id).toString();
      let idArray = (ids + "").split(",");
      this.delAllSelectedSupplierstoreTableDataQueryList(idArray);
    },
    delAllSelectedSupplierstoreTableDataQueryList(idArray){
      let that = this;
      this.promotion.merchantType = "2";
      this.promotion.id = idArray[this.storeTableDataSelectionIndex];
      this.utils.request.promotionMerchantDeleteById(this.promotion, function(){
        that.storeTableDataSelectionIndex++;
        if(that.storeTableDataSelectionIndex<=idArray.length){
          that.delAllSelectedSupplierstoreTableDataQueryList(idArray)
        }else{
          //执行成功
          that.storeTableDataSelectionIndex = 0;
          that.$message({message: "删除成功", type: "success"});
          that.mainStoreTableDataFormFind();
        }
      });
    },
    //批量删除商家
    delAllSelectedSuppliermerchantTableData2() {
      // this.merchantTableData2Selection;
      let ids = this.merchantTableData2Selection.map(item => item.id).toString();
      let idArray = (ids + "").split(",");
      this.delAllSelectedSupplierQueryList(idArray);
    },
    delAllSelectedSupplierQueryList(idArray){
      let that = this;
      this.promotion.merchantType = "1";
      this.promotion.id = idArray[this.merchantTableData2SelectionIndex];
      this.utils.request.promotionMerchantDeleteById(this.promotion, function(){
        that.merchantTableData2SelectionIndex++;
        if(that.merchantTableData2SelectionIndex<=idArray.length){
          that.delAllSelectedSupplierQueryList(idArray)
        }else{
          //执行成功
          that.merchantTableData2SelectionIndex = 0;
          that.$message({message: "删除成功", type: "success"});
          that.mainMerchantFormFind();
        }
      });
    },


    // ------------------------------------商品开始方法-------------------------------------start

    // 换条数刷新
    handleSizeChangeForProduct: function (pageSize) {
      this.productForm.limit = pageSize;
      this.productForm.start = 1;
      this.productFormFind();
    },

    // 换页刷新
    handleCurrentChangeForProduct: function (pageNum) {
      this.productForm.start = pageNum;
      this.productFormFind();
    },

    // 查询商品
    productFormFind(){
      let that_ =this;
      that_.utils.request.queryPageProductManagement(this.productForm, function (resp) {
        console.log("======查询商品====="+resp);
        if (resp.code == "0000") {
          that_.productTableData= resp.data.rows;
          that_.productTableDataTotal = resp.data.total;
        }
      });
    },

    // 商品多项目选择
    productSelectionChange(val){
      console.log('================================'+val);
      // this.storeTableDataSelection=val;
    },


    // 选择商品
    addSelectionChangeProduct(val) {
      let this_ =this;
      this_.productAddSelection = val;
      console.log("==========选择商品============"+JSON.stringify(val));
    },

    //确定 选择商品
    productTableData2Click(){
      console.log(this.productAddSelection);
      // 调添加商品 接口
      this.productTableDataSubmit2();
    },
    productTableDataSubmit2(){

      this.productSaveBatch();
      // let callback = res => {
      //   console.log(res);
      //   if (res.code == "0000") {
      //     this.productSaveBatch();
      //   }
      // };
      //
      // //调接口
      // //删除这个活动老的数据
      // //批量添加新的数据
      // this.promotion.id=null;
      // this.promotion.promotionId=this.promotionId;
      // this.promotion.merchantType="2";
      // //  TODO 下面可以不用删除
      // this.utils.request.promotionMerchantDeleteByPromotionId(this.promotion, callback);
    },

    //批量添加商品
    productSaveBatch(){
      console.log("productSaveBatch");
      console.log(this.productAddSelection);
      console.log("productSaveBatch2");
      this.productPromotionListObject.productPromotionList.splice(0,this.productPromotionListObject.productPromotionList.length);
      console.log("productSaveBatch promotionList");
      console.log(this.productPromotionListObject.productPromotionList);
      console.log("productSaveBatch promotionList2");

      for (let i = 0; i < this.productAddSelection.length; i++) {
        let temp = {};


        temp.promotionId         = this.promotionId;
        temp.mpId           =  this.productAddSelection[i].id;
        temp.mpName         =  this.productAddSelection[i].chineseName; // 商品名称
        temp.merchantName         =  this.productAddSelection[i].name;  //商家名称
        temp.mpCode         =  this.productAddSelection[i].code;  //商品编码
        temp.mpParentId       = this.productAddSelection[i].parentId;
        temp.merchantId       = this.productAddSelection[i].merchantId;
        temp.categoryId        = this.productAddSelection[i].categoryId;
        // temp.categoryName     = this.productAddSelection[i].categoryName;    类别名称
        temp.picUrl        = this.productAddSelection[i].pictureUrl;
        this.productPromotionListObject.productPromotionList.push(temp);
      }
      console.log("productSaveBatch productPromotionSaveBatch push ok");
      console.log("======================"+JSON.stringify(this.productPromotionListObject.productPromotionList));
      console.log("productSaveBatch productPromotionSaveBatch push ok2");

      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          // 查询本地促销商品
          this.mainProductTableDataFormFind();
        }
      };

      this.utils.request.promotionMerchantProductSaveBatch(this.productPromotionListObject, callback );

    },


    //查询促销商品
    mainProductTableDataFormFind(){
      this.mainProductForm.promotionId=this.promotionId;
      let  this_= this;
      this_.utils.request.promotionMerchantProductList(this.mainProductForm, function (resp) {
        console.log("查询促销商品查询促销商品查询促销商品查询促销商品查询促销商品:"+JSON.stringify(resp));
        if (resp.code == "0000") {
          // let ret = [];
          // for (let i = 0; i < res.data.list.length; i++) {
          //   let temp = {};
          //   temp.mpCode          = res.data.list[i].mpCode;
          //   temp.productName                   = res.data.list[i].mpName;
          //   temp.barcode              = res.data.list[i].barcode;
          //   // temp.unit            = res.data.list[i].unit;
          //   temp.merchantName            = res.data.list[i].merchantName;
          //   ret.push(temp);
          // }
          //
          this_.merchantProductTableData = resp.data.rows;
          this_.merchantProductTableDataTotal = resp.data.total;
        }
      });
    },

    // ------------------------------------商品结束方法-------------------------------------end

    addActive(){
      if (this.active++ > 3) this.active = 1;
    },
    next() {
      let _this = this;
      let callback = function(res) {
            if (res.code == "0000") {
              this.promotionId = res.data;
              this.promotion.promotionId = res.data;
              this.mainMerchantForm.promotionId = res.data;
              this.mainStoreMerchantForm.promotionId = res.data;
              _this.addActive();
              _this.mainMerchantFormFind();
              _this.mainStoreTableDataFormFind();
            } else {
              _this.$message({ message: "操作失败", type: "fail" });
              _this.active = 1;
            }
        };
        let callbackUpdate = function(res) {
            if (res.code == "0000") {
              _this.addActive();
              _this.mainMerchantFormFind();
              _this.mainStoreTableDataFormFind();
            } else {
              _this.$message({ message: "操作失败", type: "fail" });
              _this.active = 1;
            }
        };
       //保存活动基础配置
       if(this.active==1){
         if(this.promotionId == null){
            this.utils.request.promotionCreate(this.filters,callback);
         }else{
            this.utils.request.promotionUpdate(this.filters,callbackUpdate);
         }

       }
       //更新活动状态
       if(this.active==3 || this.active == 4){
              let callback = function(res) {
                if (res.code == "0000") {
                  _this.addActive();
                } else {
                  console.log("修改失败");
                  _this.addActive();
                }
            };
            let params = {"promotionId": this.promotionId, "status": this.active == 3 ? 2 : 3}
            this.utils.request.promotionUpdateStatus(this.params,callback);
       }
        if(this.active==2){
        this.addActive();
       }
        if(this.active==4){
            this.$message({ message: "操作成功", type: "success" });
            return;
        }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量选择删除商品
     handleBatchDeleteSelection(val) {
      this.batchDeleteSelection = val.map((item) => {
          return item.id;
      });
    },
    //批量删除促销商品-todo
    delBatchMerchantProducts(ids){
        let callback = function(res) {
            if (res.code == "0000") {
              //成功后重新获取一下商家商品列表
            } else {
              alert("删除失败");
            }
        };
        let param ={"ids": ids};
        this.utils.request.promotionMerchantProductDeleteBatch(param, callback);
    },

    //删除促销商品-todo
    delMerchantProducts(promotionId, mpId){
      console.log("=====删除促销商品:promotionId==="+ promotionId + "==mpId==" + mpId);
      let this_ =this;
      let callback = function(res) {
        if (res.code == "0000") {
          // 成功查询本地促销商品
          console.log(res)
          this_.mainProductTableDataFormFind();
        } else {
          this_.mainProductTableDataFormFind();
          alert("删除失败");
        }
      };

      let param ={};
      param.promotionId         =promotionId;
      param.mpId           =mpId;
      this.utils.request.promotionMerchantProductDelete(param, callback);
    },

    //更新价格或者限量-todo
    updatePriceOrLimit(val){
        let jsonVal =JSON.stringify(val);
        console.log("========更新价格或者限量======="+jsonVal);
        let callback = function(res) {
            if (res.code == "0000") {

            } else {
              //alert("修改失败");
            }
        };


        let temp = {};
        temp.promotionId              = val.promotionId;
        temp.mpId                     = val.mpId;
        temp.channelMerchantLimit     = val.channelMerchantLimit;
        temp.channelStoreLimit        = val.channelStoreLimit;
        temp.channelIndividualLimit   = val.channelIndividualLimit;
        temp.orderLimit               = val.orderLimit;
        console.log("========更新价格或者限量请求值======="+temp);
        this.utils.request.promotionMerchantProductUpdatePriceOrLimit(temp, callback);
    },
    repelSelectionChange(val){
      this.repelSelection = val;
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "0") {
        // 触发‘配置管理’事件
        this.first();
      } else {
        // 触发‘用户管理’事件
        this.second();
      }
    },
    first() {
      console.log("生效商品");
      this.modalShow = 1;
    },
    second() {
      console.log("互斥商品");
      this.modalShow = 2;
    },
    //添加商品弹窗
    productSelectionModal() {
      this.productVisible = true;
    },
    showBatchSetUp(){
      if(this.search==true){
        this.search=false;
      }
      if(this.setUp ==false){
        this.setUp = true;
      }else if(this.setUp ==true){
        this.setUp = false;
      }
    },
    showQueryCondition(){
      if(this.setUp==true){
        this.setUp=false;
      }
      if(this.search ==false){
        this.search = true;
      }else if(this.search ==true){
        this.search = false;
      }
    },
    batchReAdd(){
      if(this.multipleSelection.length<1){
        this.$message({ message: "请选择要设置的商品", type: "error" });
        return false;
      }
      this.$message({ message: "操作成功", type: "success" });
    },
    updatePriceAndLimit(){

    },
    importCommodityModal(val){
      if(val===1){
        this.operation = true;
      }else if(val==2){
        this.operation = false;
      }
      this.uploadVisible = true;
    },
    // 取值
    getValue(value){
      this.valueId = value
      console.log(this.valueId);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
        console.log(this.$refs.selectTree);
    },
  },
  computed:{
    /* 转树形数据 */
    optionData(){
      let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
      return  cloneData.filter(father=>{                      // 循环所有项，并添加children属性
          let branchArr = cloneData.filter(child=>father.id == child.parentId);       // 返回每一项的子级数组
          branchArr.length>0 ? father.children=branchArr : ''   //给父级添加一个children属性，并赋值
          return father.parentId==0;      //返回第一层
      });
    }
  },
  mounted() {
    //活动id
    //0-创建-1-编辑；
    this.auth = this.$route.query.auth;
    //
    // console.log(this.$route.query.auth);
  }
};
</script>

<style scoped>
.pdL10 {
  padding-left: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.border-left {
  border-left: 3px #ddd solid !important;
}
.font-bold {
  font-weight: 700;
}
.form-group {
  margin-bottom: 15px !important;
  margin-right: -0px !important;
  margin-left: -0px !important;
}
.form-horizontal .control-label {
  padding-top: 5px;
  margin-bottom: 0;
  text-align: right;
}
.form-horizontal div {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
  font-size: 12px;
  color: #666666;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  word-wrap: break-word;
}
.form-horizontal .control-label {
  padding-top: 3px !important;
}
.col-sm-2 {
  width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
  float: left;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mgt15 {
  margin-top: 15px;
}

</style>
